<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-for的遍历</title>
        <script src="../public/vue2.7.14-dev.js"></script>
    </head>
    <body>
        <!-- 首先，v-for可以遍历数组和对象（array,object），注意遍历时的参数
        你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法 -->
        <!-- 遍历数组 -->
        <ul id="example-2">
            <li v-for="(item, index) in items">
                {{ parentMessage }} - {{ index }} - {{ item.message }}
            </li>
        </ul>
        <!-- 遍历对象:注意里面参数的顺序 -->
        <ul id="v-for-object" class="demo">
            <li v-for="(value,name,index) in object">
                {{ index }}. {{ name }}: {{ value }}
            </li>
        </ul>
        <script>
        var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
      </script>
    </body>
</html>